import { createApp, reactive } from 'vue';
import { ElLoading } from 'element-plus';
import myLoad from './CommonLoading.vue';

const msg = reactive({ show: false, title: '拼命加载中...' });
const $loading = createApp(myLoad, { msg }).mount(document.createElement('div'));
const load = {
  show(title) {
    msg.show = true;
    msg.title = title;
    document.body.appendChild($loading.$el);
  },
  hide() {
    msg.show = false;
  },
};
let loading;
let loadingNum = 0;

function startLoading(title) {
  if (loadingNum == 0) {
    loading = ElLoading.service({ lock: true, text: title, background: 'rgba(255,255,255,0.5)' });
  }

  loadingNum++;
}

function endLoading() {
  loadingNum--;

  if (loadingNum <= 0) {
    loading.close();
  }
}

export { load, startLoading, endLoading };
